@import "./mixin.styl"

body, html
  line-height: 1
  font-weight: 200
  font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif
  &.scroll-disabled
    overflow hidden !important
    position: fixed;

a
  cursor pointer
  color #598abf

.clearfix
  zoom 1
  &:before,&:after
    display: table
    content: ""
    clear: both

//基本框架样式：
.card
  width 100%
  background-color #fff
  margin-bottom .5625rem
  position: relative
  box-shadow: 0 1px 0.1875rem -0.125rem rgba(0,0,0,.2)

.card-4
  a
    height 2rem
    display: flex
    align-items center
    padding .375rem 0 .375rem .75rem
.content
  flex 1
  display: flex
  align-items center

.card-line-group
  width 100%
  background-color #fff
  margin-bottom .5625rem
  a
    color #333

.card-line
  color #fff
  border-bottom-1px()
  can-active()
  a>.iconfont
    color: #fff;
    width 24px
    height 24px
    text-align: center
    line-height: 24px
    font-size: 20px;
    margin-right .625rem
  a>.icon-right-arrow
    font-size:16px
    color #aaa

.avatar-card
  display flex
  background-color #fff
  can-active()
  .card-avatar
     display block
     width 3rem
     height 3rem
     line-height 3rem
     text-align center
     margin .5rem 0 .5rem .5rem
    & img
      width 48px
      height 48px
  .avatar-card-content
    display flex
    flex 1
    width 100%
    flex-direction column
    justify-content center
    overflow hidden
    padding .5rem .6875rem
    .sub-text
      padding 5px 20px 0 0
  .plus-content
    color #aaa
    display flex
    align-items center
    margin-right .75rem

.btn
  display: inline-block;
  text-align: center;
  font-size: 18px;
  color: #212529;
  background-color: #e2e6ea;
  padding: 6px 12px;
  border: 1px solid #0000
  border-radius 4px
  outline none
  user-select none
  cursor pointer
  &:active
    box-shadow: 0 0 0 0.2rem rgba(248,249,250,.5)

.btn-sm
  font-size: .75rem;
  padding: 0 .625rem;
  margin-left: .75rem;
  margin-right: .001rem;
  height: 1.6875rem;
  line-height: 1.6875rem;

.btn-warning
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
  &:active
    box-shadow: 0 0 0 0.2rem  rgba(255,193,7,.5)

.btn-orange
    color: #fff;
    background: #FF8200;
    border: 0 solid #0000;
    &:active
      background: #E07400;
      border-color: #0000;


//文字相关类：
.txt-l
  font-size .9375rem
.txt-m
  font-size .875rem
.txt-s
  font-size .8125rem
.txt-xs
  font-size .625rem
.txt-cut
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.mct-a
  color #333
.mct-b
  color: #5d5d5d
.mct-d
  color #929292
/*active style:*/
/*微博用的是data-act-type:"hover"，估计是为了适配移动端。稍后更改这个问题。
IOS safari浏览器对于:active有怪癖。
https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari*/
.able-to-active:active
  background-color #ebebeb
.no-text-select
  -webkit-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  -o-user-select: none
  user-select: none

/*1px hack:*/
.separate-line
  //width .0625rem
  //height 1.5rem
  //background-color #dcdcdc
  //line-height 1
  //微博所用方法：
  height: 1.5rem
  width: 1px
  background-color: #dadada
  background-image: -webkit-gradient(linear,left top,right top,color-stop(50%,rgba(0, 0, 0, 0)),color-stop(50%,#dadada),color-stop(100%,#dadada))
  background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0) 50%,#dadada 50%,#dadada 100%)
  background-image: linear-gradient(to right,rgba(0, 0, 0, 0) 50%,#dadada 50%,#dadada 100%)
  background-size: 1px 100%
  background-repeat: no-repeat
  background-position: right
  //搭配mask蒙版/遮罩属性，实现向上下两端渐细
  -webkit-mask: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0, 0, 0, 0)),color-stop(30%,#000),color-stop(70%,#000),color-stop(100%,rgba(0, 0, 0, 0)))
  -webkit-mask: -webkit-linear-gradient(top,rgba(0, 0, 0, 0),#000 30%,#000 70%,rgba(0, 0, 0, 0) 100%)


.border-1px
  border none
  position: relative

.border-top-1px:before
    position: absolute
    top 0
    left 0
    content ' '
    width: 100%
    height .0625rem
    background-color #dadada

.border-bottom-1px:after
    position: absolute
    left 0
    bottom 0
    content ' '
    width: 100%
    height .0625rem
    background-color #dadada


@media (-webkit-min-device-pixel-ratio: 2), not all
  .border-top-1px:before
    transform scaleY(0.5)
  .border-bottom-1px:after
    transform scaleY(0.5)
  .separate-line
    transform scaleX(0.5)

.border-around-1px
  position: relative
.border-around-1px:before
  /*border-1px-hack
  http://jinlong.github.io/2015/05/24/css-retina-hairlines/*/
  content: ' '
  position: absolute
  top: 0
  left: 0
  border: .0625rem solid #e4e4e4
  -webkit-box-sizing: border-box
  box-sizing: border-box
  border-radius: 50%
  width: 200%
  height: 200%
  transform: scale(0.5)
  transform-origin: left top
